<template>
  <div class="question">
    <div class="title">宠物主用户调研</div>
    <div class="intro">为了更好地帮助毛孩子们健康成长，我们特别制作了此份问卷，答题预计需要2-3分钟，结束后可获得回馈礼物</div>
    <div class="list">
      <div class="item">
        <div class="name">1.您的性别是</div>
        <nut-radio-group v-model="form.sex">
          <nut-radio label="A">A.男性</nut-radio>
          <nut-radio label="B">B.女性</nut-radio>
        </nut-radio-group>
      </div>
      <div class="item">
        <div class="name">2.您的年龄</div>
        <nut-radio-group v-model="form.sex">
          <nut-radio label="A">A.25岁及以下</nut-radio>
          <nut-radio label="B">B.26~40岁</nut-radio>
          <nut-radio label="C">C.41~60岁</nut-radio>
          <nut-radio label="D">D.61岁及以上</nut-radio>
        </nut-radio-group>
      </div>
      <div class="item">
        <div class="name">3.您的月收入是</div>
        <nut-radio-group v-model="form.sex">
          <nut-radio label="A">A.0~4000</nut-radio>
          <nut-radio label="B">B.4001~8000</nut-radio>
          <nut-radio label="C">C.8001~12000</nut-radio>
          <nut-radio label="D">D.12001~20000</nut-radio>
          <nut-radio label="E">E.20001~30000</nut-radio>
          <nut-radio label="F">F.3万以上</nut-radio>
        </nut-radio-group>
      </div>
      <div class="item">
        <div class="name">4.您家的宠物数量</div>
        <nut-radio-group v-model="form.sex">
          <nut-radio label="A">A.1~2只</nut-radio>
          <nut-radio label="B">B.3~4只</nut-radio>
          <nut-radio label="C">C.5只及以上</nut-radio>
        </nut-radio-group>
      </div>
      <div class="item">
        <div class="name">5.您的宠物是类型是</div>
        <nut-radio-group v-model="form.sex">
          <nut-radio label="A">A.宠物猫</nut-radio>
          <nut-radio label="B">B.宠物狗</nut-radio>
          <nut-radio label="C">C.其他</nut-radio>
        </nut-radio-group>
      </div>
      <div class="item">
        <div class="name">6.您的宠物是否绝育？</div>
        <nut-radio-group v-model="form.sex">
          <nut-radio label="A">A.是</nut-radio>
          <nut-radio label="B">B.否</nut-radio>
        </nut-radio-group>
      </div>
      <div class="item">
        <div class="name">7.您的宠物品种:</div>
        <nut-input v-model="val" placeholder="请输入宠物品种" />
      </div>
      <div class="item">
        <div class="name">8.您每月在宠物上的花销</div>
        <nut-radio-group v-model="form.sex">
          <nut-radio label="A">A.0~300元</nut-radio>
          <nut-radio label="B">B.300~600元</nut-radio>
          <nut-radio label="C">C.600~1000元</nut-radio>
          <nut-radio label="D">D.1000元以上</nut-radio>
        </nut-radio-group>
      </div>
      <div class="item">
        <div class="name">9.您的宠物身体健康状况</div>
        <nut-radio-group v-model="form.sex">
          <nut-radio label="A">A.非常健康</nut-radio>
          <nut-radio label="B">B.有过常见易恢复的疾病</nut-radio>
          <nut-radio label="C">C.有过需手术治疗的疾病</nut-radio>
          <nut-radio label="D">D.有慢性病症/需长期治疗的疾病</nut-radio>
        </nut-radio-group>
      </div>
      <div class="item">
        <div class="name">10.您购买的宠物食品（主粮）来源</div>
        <nut-radio-group v-model="form.sex">
          <nut-radio label="A">A.进口</nut-radio>
          <nut-radio label="B">B.国产</nut-radio>
        </nut-radio-group>
      </div>
      <div class="item">
        <div class="name">11.您购买的国产宠物食品品牌是</div>
        <nut-radio-group v-model="form.sex">
          <nut-radio label="A">A.网易严选</nut-radio>
          <nut-radio label="B">B.高爷家</nut-radio>
          <nut-radio label="C">C.蓝氏</nut-radio>
          <nut-radio label="D">D.凯锐思</nut-radio>
          <nut-radio label="E">E.麦富迪</nut-radio>
          <nut-radio label="F">F.疯狂小狗</nut-radio>
          <nut-radio label="G">G.其他</nut-radio>
        </nut-radio-group>
      </div>
      <div class="item">
        <div class="name">12.您购买的进口宠物食品品牌是</div>
        <nut-radio-group v-model="form.sex">
          <nut-radio label="A">A.皇家</nut-radio>
          <nut-radio label="B">B.百利</nut-radio>
          <nut-radio label="C">C.蓝氏</nut-radio>
          <nut-radio label="D">D.渴望</nut-radio>
          <nut-radio label="E">E.草本魔力</nut-radio>
          <nut-radio label="F">F.爱肯拿</nut-radio>
          <nut-radio label="G">G.K9</nut-radio>
          <nut-radio label="H">H.素力高</nut-radio>
          <nut-radio label="I">I.法米娜</nut-radio>
          <nut-radio label="J">J.其他</nut-radio>
        </nut-radio-group>
      </div>
      <div class="item">
        <div class="name">13.您是否购买过处方粮</div>
        <nut-radio-group v-model="form.sex">
          <nut-radio label="A">
            <div class="flex-a" style="white-space: nowrap;"><text>A.是，品牌为</text><nut-input v-model="val"
                placeholder="请输入文本" style="display: inline-block;width: 200rpx;" /></div>
          </nut-radio>
          <nut-radio label="B">B.否</nut-radio>
        </nut-radio-group>
      </div>
      <div class="item">
        <div class="name">14.您习惯在哪里购买宠物食品用品</div>
        <nut-radio-group v-model="form.sex">
          <nut-radio label="A">A.淘宝天猫</nut-radio>
          <nut-radio label="B">B.京东</nut-radio>
          <nut-radio label="C">C.抖音</nut-radio>
          <nut-radio label="D">D.小红书</nut-radio>
          <nut-radio label="E">E.快手</nut-radio>
          <nut-radio label="F">F.线下宠物门店</nut-radio>
          <nut-radio label="G">G.宠物医院</nut-radio>
          <nut-radio label="H">H.线下商超</nut-radio>
          <nut-radio label="I">I.其他</nut-radio>
        </nut-radio-group>
      </div>
      <div class="item">
        <div class="name">15.您给宠物日常体内/外驱虫的频次是</div>
        <nut-radio-group v-model="form.sex">
          <nut-radio label="A">A.每月一次</nut-radio>
          <nut-radio label="B">B.三月一次</nut-radio>
          <nut-radio label="C">C.半年一次</nut-radio>
          <nut-radio label="D">D.其他</nut-radio>
        </nut-radio-group>
      </div>
      <div class="item">
        <div class="name">16.你常用的驱虫药品牌是</div>
        <nut-radio-group v-model="form.sex">
          <nut-radio label="A">A.福来恩</nut-radio>
          <nut-radio label="B">B.大宠爱</nut-radio>
          <nut-radio label="C">C.爱沃克</nut-radio>
          <nut-radio label="D">D.拜宠清</nut-radio>
          <nut-radio label="E">E.海乐妙</nut-radio>
          <nut-radio label="F">F.其他</nut-radio>
        </nut-radio-group>
      </div>
    </div>
    <div class="end">感谢您填写此问卷，我们为您精心准备了回馈礼品</div>
    <div class="btn"><nut-button block type="info" @click="submit">提交</nut-button></div>
  </div>
</template>

<script>
import Taro, { } from '@tarojs/taro';
import { reactive, toRefs, onMounted } from 'vue';
import { } from '../../../api/index'

export default {
  name: 'question',
  components: {},
  setup() {
    const data = reactive({
      form: {}
    });

    onMounted(() => {

    });
    const submit = () => {

    }
    return {
      ...toRefs(data), submit
    }
  }
}
</script>
<style lang="scss">
.question {
  .title {
    text-align: center;
    margin: 20rpx auto;
    font-weight: bold;
    font-size: 32rpx;
  }

  .intro {
    text-indent: 2em;
    margin: 0 20rpx 20rpx;
    text-align: justify;
    font-size: 28rpx;
  }

  .list {
    margin: 0 20rpx;
    font-size: 28rpx;

    .item {
      margin-bottom: 20rpx;

      .name {
        margin-bottom: 10rpx;
      }
    }

    .nut-radio__label {
      margin-left: 10rpx;
    }
  }

  .end {
    margin: 0 20rpx;
    padding-bottom: 20rpx;
  }

  .btn {
    padding: 20rpx;
  }
}
</style>
